<script setup>
import { ref } from "vue";
const props = defineProps({
  state: {
    type: Number,
    default: 0,
  },
  item: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: "零售",
  },
});

const modalTableData = ref([
  {
    mdfz: "",
    pfjgz: "按百分比加价",
    pfjgzjj: "+",
    pfjgzbfb: "",
    pfjgzgd: "",
  },
]);
const mdfzOptions = ref([]);
const pfjgzOptions = ref([
  {
    value: "按百分比加价",
    label: "按百分比加价",
  },
  {
    value: "按固定额度加价",
    label: "按固定额度加价",
  },
]);
const pfjgzjjOptions = ref([
  {
    value: "+",
    label: "+",
  },
  {
    value: "-",
    label: "-",
  },
]);

const addTable = (index) => {
  modalTableData.value.splice(index, 0, {
    mdfz: "",
    pfjgz: "按百分比加价",
    pfjgzjj: "+",
    pfjgzbfb: "",
    pfjgzgd: "",
    state: true,
  });
};

const delTable = (index) => {
  modalTableData.value.splice(index, 1);
};

const setTable = (data) => {
  modalTableData.value = data;
};

const inputEvents = (newVal, row) => {
  if (parseInt(newVal) > 100) {
    row.pfjgzbfb = 100;
  }
};
const maxinputEvents = (newVal, row) => {
  if (parseInt(newVal) > 99999) {
    row.pfjgzgd = 99999;
  }
};

defineExpose({ setTable });
</script>
<template>
  <el-table
    class="modalTableClass"
    :data="modalTableData"
    style="width: 100%"
    stripe
  >
    <el-table-column prop="mdfz" label="适用门店分组" :min-width="120">
      <template #default="{ row }">
        <el-select
          :disabled="!state"
          placeholder="请选择"
          v-model="row.mdfz"
          v-if="row.state"
        >
          <el-option
            v-for="item in mdfzOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div v-else>{{ row.mdfz }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="pfjgz" :label="'分组定价'" :min-width="400">
      <template #default="{ row }">
        <div class="flex align-items-center" v-if="row.state">
          <el-select
            :disabled="!state"
            placeholder="请选择"
            style="width: 160px"
            v-model="row.pfjgz"
          >
            <el-option
              v-for="item in pfjgzOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            class="ml8"
            style="width: 60px"
            v-model="row.pfjgzjj"
            :disabled="!state"
          >
            <el-option
              v-for="item in pfjgzjjOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div v-if="row.pfjgz == '按百分比加价'">
            <el-input
              placeholder="请输入"
              class="ml8"
              :disabled="!state"
              style="width: 100px"
              @input="inputEvents($event, row)"
              v-model="row.pfjgzbfb"
              :min="0"
              :max="100"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
            <span> %</span>
          </div>
          <el-input
            v-else
            class="ml8"
            :disabled="!state"
            placeholder="请输入"
            style="width: 100px"
            v-model="row.pfjgzgd"
            @input="maxinputEvents($event, row)"
            :max="99999"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </div>
        <div class="" v-else>-</div>
      </template>
    </el-table-column>
    <el-table-column
      v-if="!state"
      prop="lsj"
      :label="title + '价'"
      fixed="right"
    >
      <template #default="{ row }"> {{ row.ljs || "-" }} </template>
    </el-table-column>
    <el-table-column v-else prop="lsj" :label="title + '价'">
      <template #default="{ row }"> {{ row.ljs || "-" }} </template>
    </el-table-column>

    <el-table-column prop="cz" fixed="right" label="操作" v-if="state">
      <template #default="{ row, $index }">
        <img
          @click="addTable($index)"
          class="actionClass"
          src="@/assets/images/retail_add.png"
        />
        <img
          @click="delTable($index)"
          v-if="$index"
          class="actionClass ml8"
          src="@/assets/images/retail_del.png"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>
.modalTableClass {
  margin-top: 8px;
  height: 300px;
  margin-bottom: 24px;
}

.actionClass {
  height: 16px;
  width: 16px;
  cursor: pointer;
}
</style>
